<template>
  <TableView ref="tableView" :table-attrs="{ api: getList }" :toolbar-attrs="{ buttons: ['back'] }">
    <template #columns>
      <TableColumn
        label="状态"
        prop="status"
        :options="[
          { label: '未读', value: 0 },
          { label: '已读', value: 1 }
        ]" />
      <TableColumn label="内容" prop="content" @click="test" />
      <TableColumn label="描述" prop="remarks" />
      <TableColumn
        label="类型编码"
        prop="typeCode"
        :options="[
          { label: '内部跳转', value: 'N' },
          { label: '外部跳转', value: 'Y' }
        ]" />
      <TableColumn label="创建人" prop="createdBy" />
      <TableColumn label="创建时间" prop="createdTime" />
      <TableColumn label="操作">
        <template #default="{ row }">
          <ElButton type="text" size="small" icon="el-icon-view" @click="readMessageClick(row)"> 标记为已读 </ElButton>
          <ElButton type="text" size="small" icon="el-icon-view" @click="openClick(row)"> 打开消息请求 </ElButton>
        </template>
      </TableColumn>
    </template>
  </TableView>
</template>

<script>
  import { readMessage, systemMessagePage } from '@/api/message/systemmessagerecord'
  import { mapState } from 'vuex'

  export default {
    name: 'SystemMessage',
    computed: {
      ...mapState('user', {
        userId: state => state.sysUser.userId
      })
    },
    methods: {
      getList(page) {
        return systemMessagePage({
          current: page.current,
          size: page.size,
          createdId: this.userId,
          status: 0
        })
      },
      async readMessageClick(row) {
        const res = await readMessage(row.id)
        if (res.data.data) {
          this.$message.success('标记成功')
          row.status = 1
        }
      },
      openClick(row) {
        if (this.$isBlank(row.openUrl)) {
          this.$message.success('无请求连接！')
          return
        }
        if (row.typeCode === 'Y') {
          window.open(row.openUrl, '_blank')
        } else {
          this.$router.push({ path: row.openUrl })
        }
      },
      test() {
        console.log(arguments)
      }
    }
  }
</script>
